<template>
  <div class="editUnit">
    <div class="editUnit_main">
      <el-form :inline="true"
               status-icon
               :model="formInline"
               :rules="rules"
               ref="formInline"
               class="demo-form-inline">
        <div>
          <el-form-item label="登录页名称">
            <el-input v-model="formInline.login_name"
                      placeholder="请输入登陆页名称"
                      class="name-input">
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="单位名称"
                      prop="name">
          <el-input v-model="formInline.name"
                    placeholder="请输入单位名称"
                    class="unit-name">
          </el-input>
        </el-form-item>
        <div>
          <el-form-item label="平台页面名称">
            <el-input v-model="formInline.platform_name"
                      placeholder="请输入平台页面名称"
                      class="name-input">
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="单位简称"
                      class="nick-item"
                      prop="nick_name">
          <el-input v-model="formInline.nick_name"
                    placeholder="请输入单位简称"
                    class="nick-name"></el-input>
        </el-form-item>
        <el-form-item label="单位类型"
                      class="nick-item"
                      prop="company_type"
                      id="unitType">
          <el-select v-model="formInline.company_type"
                     style="width:100%!important;"
                     placeholder="请选择单位类型"
                     @change="onChangeType">
            <el-option v-for="item in unitTypeArr"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-input v-model="formInline.nick_name"
                    placeholder="请输入单位简称"
                    class="nick-name"></el-input> -->
        </el-form-item>
        <el-form-item prop="company_business_type"
                      label="业务类型"
                      class="formItem"
                      label-width="80px">
          <el-select v-model="formInline.company_business_type"
                     class="unit-name"
                     clearable
                     placeholder="请选择业务类型">
            <el-option v-for="item in businessType"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop=""
                      v-if="formInline.company_business_type === '1' ||formInline.company_business_type === '3'"
                      class="formItem"
                      label="监管级别"
                      label-width="80px">
          <el-select v-model="formInline.regulatory_level"
                     class="unit-name"
                     placeholder="请选择监管级别">
            <el-option v-for="item in superviseArr"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="域名配置"
                      class="domain-item"
                      prop="domain_name">
          <el-input v-model="formInline.domain_name"
                    placeholder="请输入域名配置"
                    class="domain-input"></el-input>
        </el-form-item>
        <el-form-item label="单位logo"
                      class="addPadding logo-item">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :http-request="uploadFile"
                     name="pic_file_apk"
                     accept=".png,.jpg">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div>
          <el-form-item label="logo是否显示">
            <el-radio-group v-model="formInline.show_logo_status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">不显示</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="首页图片"
                      class="addPadding logo-item">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :on-success="handleAvatarHomeSuccess"
                     :http-request="uploadHomeFile"
                     name="pic_file_apk"
                     accept=".png,.jpg">
            <img v-if="homeImageUrl"
                 :src="homeImageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="单位地址"
                      prop="province">
          <el-select v-model="formInline.province"
                     placeholder="请选择省"
                     class="province-select"
                     @change="getCity(formInline.province)">
            <el-option v-for="item in province"
                       :key="item.value"
                       :label="item.province"
                       :value="item.province_no">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="city">
          <el-select v-model="formInline.city"
                     placeholder="请选择市"
                     class="city-select"
                     @change="getArea(formInline.city)">
            <el-option v-for="item in city"
                       :key="item.value"
                       :label="item.city"
                       :value="item.city_no">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="district">
          <el-select v-model="formInline.district"
                     placeholder="请选择区"
                     class="area-select"
                     @change="changeArea(formInline.district)">
            <el-option v-for="item in district"
                       :key="item.value"
                       :label="item.area"
                       :value="item.area_no">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="address">
          <el-input v-model="formInline.address"
                    class="address"></el-input>
        </el-form-item>
        <el-form-item v-if="false"
                      label='具体地址'
                      class="addPadding detail-item">
          <el-input v-model="detailaddress"
                    disabled
                    placeholder="请选择"
                    class="detail-address"></el-input>
        </el-form-item>
        <el-form-item label='单位邮箱'
                      class="addPadding detail-item">
          <el-input v-model="formInline.email"
                    placeholder="请输入邮箱"
                    class="detail-address"></el-input>
        </el-form-item>
        <el-form-item label='负责人名称'
                      class="principal addPadding">
          <el-input v-model="formInline.lead"
                    placeholder="请输入负责人名称"
                    class="lead-name"></el-input>
        </el-form-item>
        <el-form-item label='负责人电话'>
          <el-input v-model="formInline.lead_phone"
                    placeholder="请输入负责人电话"
                    class="lead-phone"></el-input>
        </el-form-item>
        <el-form-item label='法人姓名'
                      class="addPadding legal-person">
          <el-input v-model="formInline.legal_person"
                    placeholder="请输入法人姓名"
                    class="legal-name"></el-input>
        </el-form-item>
        <el-form-item label='证件类型'
                      class="addPadding">
          <el-select v-model="formInline.certificates_type"
                     placeholder="请选择证件类型"
                     class="type-select">
            <el-option v-for="item in cardData"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='证件号码'>
          <el-input v-model="formInline.certificates_num"
                    placeholder="请输入证件号码"
                    class="num-input"></el-input>
        </el-form-item>
        <el-form-item label='统一社会信用代码'
                      class="Credit_Code addPadding">
          <el-input v-model="formInline.license_num"
                    placeholder="请输入统一社会信用代码"
                    class="code-num"></el-input>
        </el-form-item>
        <el-form-item label="营业执照"
                      class="addPadding lincense">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :on-success="unitAvatarSuccess"
                     :http-request="unitUpload"
                     name="pic_file_apk"
                     accept=".png,.jpg">
            <img v-if="unitUrl"
                 :src="unitUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-row class="footer-row">
        <el-button class="btn-row"
                   @click="back()">返回</el-button>
        <el-button class="btn-row"
                   @click="saveData('formInline')">保存</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
import { editUnitApi } from '@/services/orgainzeManage'
export default {
  data () {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入单位名称'))
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的单位名称！'))
      } else {
        callback()
      }
    }
    var checkNickName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入单位简称'))
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的单位简称！'))
      } else {
        callback()
      }
    }
    var checkUnitType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择单位类型'))
      } else {
        callback()
      }
    }
    var checkDomain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入域名'))
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的域名！'))
      } else {
        callback()
      }
    }
    var checkAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入地址'))
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入具体地址！'))
      } else {
        callback()
      }
    }
    return {
      businessType: [{
        value: '1',
        name: '监管'
      }, {
        value: '2',
        name: '建设'
      },
      {
        value: '3',
        name: '建设主管部门'
      }],
      superviseArr: [{
        value: '1',
        name: '省级'
      }, {
        value: '2',
        name: '市级'
      }, {
        value: '3',
        name: '县级'
      }],
      detailaddress: '',
      formInline: {
        platform_name: '',//平台页面名称
        login_name: '',//登录页名称
        show_logo_status: 1,//logo是否显示
        regulatory_level: '', //监管级别
        company_business_type: '',  //业务类型
        name: '',
        nick_name: '',
        domain_name: '',
        logo: '',
        province: '',
        province_name: '',
        city: '',
        city_name: '',
        district: '',
        district_name: '',
        address: '',
        email: '',
        lead: '',
        lead_phone: '',
        legal_person: '',
        certificates_type: '',
        certificates_num: '',
        license_img: '',
        license_num: '',
        image_picture: '',
        company_type: ''
      },
      unitTypeArr: [], // 单位类型
      imageUrl: '', // 上传logo的图片展示地址
      imagePath: '', // 上传logo传给后台的地址
      homeImageUrl: '', // 上传首页图片展示地址
      homeImagePath: '', // 上传首页图片给后台的地址
      unitUrl: '', // 上传营业执照的图片展示地址
      unitPath: '', // 上传营业执照给后台的地址
      province: [], // 省下拉框数据
      city: [], // 市下拉框数据
      district: [], // 区下拉框数据
      cardData: [], // 证件类型数据
      value: '',
      rules: {
        name: [
          { required: true, validator: checkName, trigger: 'blur' }
        ],
        nick_name: [
          { required: true, validator: checkNickName, trigger: 'blur' }
        ],
        company_type: [
          { required: true, validator: checkUnitType, trigger: 'blur' }
        ],
        domain_name: [
          { required: true, validator: checkDomain, trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择省', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择市', trigger: 'change' }
        ],
        district: [
          { required: true, message: '请选择区', trigger: 'change' }
        ],
        address: [
          { required: true, validator: checkAddress, trigger: 'blur' }
        ],
        company_business_type: [{ required: true, message: '请选择业务类型', trigger: 'blur' }], //业务类型
      }
    }
  },
  methods: {
    // 获取单位类型下拉列表数据
    getCodeList () {
      editUnitApi.getCodeList({
        params: {
          code_type: 'companyType',
          is_page: 0
        }
      }).then((res) => {
        this.unitTypeArr = res.data.list
        console.log('res-修改-单位类型标准码=', res, 'unitTypeArr=', this.unitTypeArr)
      }).catch((error) => {
        console.log(error)
      })
    },
    // 单位类型
    onChangeType (val) {
      this.formInline.company_type = val
      console.log('单位类型=', val)
    },
    // 获取省列表数据
    getProvince () {
      editUnitApi.getProvince({
        params: {
          area_type: '1'
        }
      }).then(res => {
        this.province = res.data
      }, err => {
        console.log(err)
      })
    },
    // 获取市列表接口
    getCity (data) {
      this.formInline.city = ''
      this.formInline.district = ''
      editUnitApi.getCity({
        params: {
          area_type: '2',
          province_no: data
        }
      }).then(res => {
        this.city = res.data
        let obj = {}
        obj = this.province.find((item) => { // 这里的userList就是上面遍历的数据源
          return item.province_no === data// 筛选出匹配数据
        })
        this.formInline.province_name = obj.province
      }, err => {
        console.log(err)
      })
    },
    // 获取区列表接口
    getArea (data) {
      this.formInline.district = ''
      editUnitApi.getArea({
        params: {
          area_type: '3',
          city_no: data
        }
      }).then(res => {
        this.district = res.data
        let obj = {}
        obj = this.city.find((item) => { // 这里的userList就是上面遍历的数据源
          return item.city_no === data// 筛选出匹配数据
        })
        this.formInline.city_name = obj.city
      }, err => {
        console.log(err)
      }, err => {
        console.log(err)
      })
    },
    // 改变区的数据
    changeArea (data) {
      let obj = {}
      obj = this.district.find((item) => { // 这里的userList就是上面遍历的数据源
        return item.area_no === data// 筛选出匹配数据
      })
      this.formInline.district_name = obj.area
    },
    // 获取证件类型
    getCard () {
      editUnitApi.getCard({
        params: {
          code_type: 'legalCardType',
          is_page: '0'
        }
      }).then(res => {
        this.cardData = res.data.list
      }, err => {
        console.log(err)
      })
    },
    // 上传logo成功的钩子
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 上传logo功能
    uploadFile (params) {
      var moduleName = 'company'
      var formData = new FormData()
      formData.append('pic_file_apk[]', params.file)
      formData.append('module', moduleName)
      editUnitApi.uploadFile(
        { data: formData }
      ).then(res => {
        this.imageUrl = res.data.upload_success[0].absolute_url
        this.imagePath = res.data.upload_success[0].absolute_url
      }, err => {
        console.log(err)
      })
    },
    // 上传营业执照成功的钩子
    unitAvatarSuccess (res, file) {
      this.unitUrl = URL.createObjectURL(file.raw)
    },

    // 上传首页图片
    uploadHomeFile (params) {
      var moduleName = 'company'
      var formData = new FormData()
      formData.append('pic_file_apk[]', params.file)
      formData.append('module', moduleName)
      editUnitApi.uploadFile(
        { data: formData }
      ).then(res => {
        console.log('res=', res)
        this.homeImageUrl = res.data.upload_success[0].absolute_url
        this.homeImagePath = res.data.upload_success[0].absolute_url
      }, err => {
        console.log(err)
      })
    },
    // 上传首页图片成功的钩子
    handleAvatarHomeSuccess (res, file) {
      this.homeImageUrl = URL.createObjectURL(file.raw)
    },

    // 上传营业执照功能
    unitUpload (params) {
      var moduleName = 'company'
      var formData = new FormData()
      formData.append('pic_file_apk[]', params.file)
      formData.append('module', moduleName)
      editUnitApi.uploadFile(
        { data: formData }
      ).then(res => {
        this.unitUrl = res.data.upload_success[0].absolute_url
        this.unitPath = res.data.upload_success[0].absolute_url
      }, err => {
        console.log(err)
      })
    },
    // 保存按钮
    saveData (formInline) {
      this.formInline.org_id = this.org_id
      this.formInline.logo = this.imagePath
      this.formInline.license_img = this.unitPath
      this.formInline.image_picture = this.homeImagePath
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          editUnitApi.sureeditUnit({
            data: this.formInline
          }).then(res => {
            if (res.msg == 'SUCCESS') {
              this.$message.success('修改成功！')
              this.$router.push('./UnitManage')
            }
          }, err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 返回按钮
    back () {
      this.$router.push('./UnitManage')
    },
    // 获取项目详情信息
    getDetailInfo () {
      editUnitApi.getDetail({
        params: {
          org_id: this.org_id
        }
      }).then(res => {
        this.getCity(res.data.province_no)
        this.getArea(res.data.city_no)
        this.formInline.name = res.data.company_name
        this.formInline.nick_name = res.data.small_name
        this.formInline.province = res.data.province_no
        this.formInline.province_name = res.data.province
        this.formInline.domain_name = res.data.company_domain
        this.formInline.city = res.data.city_no
        this.formInline.city_name = res.data.city
        this.formInline.district = res.data.area_no
        this.formInline.district_name = res.data.area
        this.formInline.address = res.data.addr
        this.formInline.email = res.data.mail
        this.formInline.lead = res.data.contact_name
        this.formInline.lead_phone = res.data.contact_phone
        this.formInline.legal_person = res.data.legal_name
        this.formInline.certificates_type = res.data.legal_card_type
        this.formInline.certificates_num = res.data.legal_card_no
        this.formInline.license_num = res.data.credit_code
        this.formInline.license_img = res.data.credit_img
        this.imagePath = res.data.company_logo
        this.imageUrl = res.data.company_logo_url
        this.unitUrl = res.data.credit_img_url
        this.unitPath = res.data.credit_img
        this.homeImageUrl = res.data.image_picture_url
        this.homeImagePath = res.data.image_picture
        this.formInline.company_type = res.data.company_type
        this.formInline.company_business_type = res.data.company_business_type
        this.formInline.regulatory_level = res.data.regulatory_level;
        this.formInline.platform_name = res.data.platform_name;//平台页面名称
        this.formInline.login_name = res.data.login_name;//登录页名称
        this.formInline.show_logo_status = Number(res.data.show_logo_status);//logo是否显示

      }, err => {
        console.log(err)
      })
    }
  },
  created () {
    this.org_id = this.$route.query.org_id
    this.getCodeList()// 获取单位类型下拉列表数据
    this.getProvince()
    this.getCard()
  },
  mounted () {
    this.getDetailInfo()
  }
}
</script>
<style scoped lang="scss">
/deep/ #unitType .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
  width: 300px !important;
}
.formItem {
  width: 100%;
}
.editUnit {
  background: #fff;
  height: 100%;
  overflow-y: scroll;
}
.unit-name {
  width: 300px;
}
.nick-name {
  width: 300px;
}
.domain-item {
  width: 100%;
}
.domain-input {
  width: 680px;
}
.logo-item {
  width: 100%;
}
.nick-item {
  width: 100%;
}
.province-select {
  width: 150px;
}
.city-select {
  width: 150px;
}
.area-select {
  width: 150px;
}
.address {
  width: 190px;
}
.detail-item {
  width: 100%;
}
.detail-address {
  width: 680px;
}
.lead-name {
  width: 290px;
}
.lead-phone {
  width: 293px;
}
.legal-person {
  width: 100%;
}
.legal-name {
  width: 290px;
}
.type-select {
  width: 290px;
}
.num-input {
  width: 305px;
}
.code-num {
  width: 680px;
}
.lincense {
  width: 100%;
}
.footer-row {
  width: 50%;
  text-align: center;
}
.btn-row {
  background: #1abc9c;
  color: #fff;
}
.editUnit_main {
  padding: 20px 60px;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.principal /deep/ .el-form-item__label {
  /* padding-right:0px; */
  margin-left: -14px;
}
.Credit_Code {
  width: 100%;
}
.Credit_Code /deep/ .el-form-item__label {
  /* padding-right:0px; */
  margin-left: -56px;
}
.addPadding /deep/ .el-form-item__label {
  padding-left: 10px;
}
</style>
